<template lang="pug">


//- 不使用cube-popup组件，原因：cube-popup组件挂在body下，导致cube-popup的层级永远高于shop-cart组件,
//- shop-cart组件无法遮盖住cube-popup组件
//- createAPI也有此问题:createAPI创建的组件挂在body下，导致无法被别的组件盖住
//- cube-popup组件的参数说明：
//- type:根元素上会增加 cube-shop-cart-list 的 class
//- cube-popup(v-show="visible"
//-           type="popup-shop-cart-list"
//-           position="bottom"
//-           mask-closable=true
//-           @mask-click="maskClick"
//-           ref="popupShopCartList")
.shop-cart-list-wrapper
  //- 父元素设置了transform 属性,导致.list-mask的position:fixed失效
  transition(name="move")
    .container(v-show="visible")
      .head
        span.title 购物车
        span.clear(@click="clear") 清空
      //- 前方巨坑 -----------------------------------------------
      //- 必须传递参数:options={
                      click:false
                    }
      //- better-scroll 默认会阻止浏览器的原生 click 事件----------
      //- 否则会导致单击事件触发两次
      .scroll-wrapper
        cube-scroll(ref="cubeScroll",
                    :options="scrollOptions")
          ul.table(@click="clickTest")
            li.row(v-for="(item,index) in selectedProductions" :key="index")
              span.name {{item.name}}
              span.price ￥{{item.price*item.count}}
              span.control-container
                CartControl(:production="item" @addEvent="onAdd")
              .line
</template>

<script>
import CartControl from '~/components/cart-control/cart-control'

export default {

  // 配置名称属性，供cube-UI的createAPI调用
  name: "shop-cart-list",

  props: {
    selectedProductions: {
      type: Array,
      default: []
    },
    // 解决cube-scroll组件点击事件触发两次bug
    enableClickTwice: {
      type: Boolean,
      default: true
    },

    // 解决cube-scroll组件点击事件触发两次bug
    enableClickTwice: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      // 显/隐标志
      visible:false
    }
  },
  
  computed: {
    // cube-scroll组件的参数
    scrollOptions() {
      return {
        // 是否阻止原声click事件
        click:this.enableClickTwice
      }
    }
  },

  methods: {

    clickTest() {
      console.log('clickTest')
    },

    // 显示列表弹窗
    show() {
      // this.$refs.popupShopCartList.show()
      this.visible = true
   
      this.maskTop = this.maskTop || this.$createMaskTop({
        $events:{
          sendSeeable:(seeable)=>{
            console.log('sendSeeable:')
            console.log(seeable)
            this.visible = seeable
          }
        }
      })
      this.maskTop.show()

      //---注意:前方巨坑---------------------------------------------------------------------------------------------------------------
      // 必须手动调用cube-scroll.refresh方法，否则cube-scroll不能滚动--------------------------------------------------------------------
      // 任何时候如果出现无法滚动的情况，
      // 都应该首先查看内容元素.cube-scroll-content的元素高度/宽度是否大于容器元素.cube-scroll-wrapper的高度/宽度。这是内容能够滚动的前提条件。
      // 当满足以上条件时，仍会出现有时能滚，有时不能滚动的情况
      // 原因：加载内容元素.cube-scroll-content的时间较长，加载的过程中调用refresh，计算出的内容元素的高度仍小于容器元素的高度
      // vue不会立刻刷新DOM，等到所有更新请求完后，才刷新
      // 通过刷新DOM钩子事件(this.$nextTick)，等到下次DOM更新后，也就是内容元素加载完后，才调用refresh
      // 此时计算出的内容元素的高度才是内容元素的真实高度
      this.$nextTick(() => {
        this.$refs.cubeScroll.refresh()
      })

    },

    // 隐藏列表弹窗
    hide() {
      // this.$refs.popupShopCartList.hide()
      this.visible = false

      this.maskTop.hide()
    },

    // 点击蒙层，关闭列表弹窗
    maskClick() {
      this.visible = false
    },

    // 清空按钮点击事件
    clear() {
      this.dialogClear = this.$createDialog({
        type: 'confirm',
        content: '清空购物车?',
        confirmBtn: {
            text: '确定',
            active: true,
            disable: false
        },
        cancelBtn: {
            text: '取消',
            active: false
        },
        onConfirm: () => {
          this.selectedProductions.forEach((production)=>{
            if(production.count) {
              production.count = 0
            }
          })
          this.hide()
        },
        onCancel: () => {

        }
      })
      this.dialogClear.show()
    },

    // 将添加按钮的DOM对象传递给ShopCart组件
    onAdd(el) {
      // 调用ShopCart组件的drop方法
      // 触发小球下落动画
      this.$emit("addEvent", el)
    }

  },

  components: {
    CartControl
  },

  watch: {
    visible(newVal) {
      // 将显示状态通过事件传递给父组件
      this.$emit('sendVisible', newVal)
    }
  }

  }
</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.shop-cart-list-wrapper
  .container
    position:absolute
    bottom:0
    left:0
    width:100%
    height:160px
    &.move-enter-active, &.move-leave-active
      transition: all .4s ease-in-out
    &.move-enter, &.move-leave-to
      transform: translate3d(0, 120px, 0)
    &.move-enter-to, &.move-leave
      transform: translate3d(0, 0, 0)
    .head
      line-height:40px
      background:$color-background-ssss
      border-bottom:solid 1px $color-background-sss
      .title
        margin-left:18px
      .clear
        float:right
        margin-right:18px
        color:$color-blue
    .scroll-wrapper
      // 不能用max-height，会导致cube-scroll不能滚动
      height: 120px
      overflow: hidden
      background: $color-white
      .row
        position:relative
        line-height:48px
        height:48px
        .name
          display:inline-block
          margin-left:18px
          font-weight:600
        .price
          display:inline-block
          position: absolute
          right:120px
          font-weight:600
        .control-container
          display:inline-block
          position: absolute
          right:18px
          top:50%
          margin-top:-12px
        .line
          border-top:solid 1px $color-background-sss
</style>
